<template>
	<view>
		<my-search @click.native="gotoSearch"></my-search>
		<view class="zg">
			<!-- 左滚动区域 -->
			<scroll-view scroll-y="true" class="lg" :style="{height: wh + 'px'}">
				<view v-for="(item,index) in cateList" :key="index" class="lw" @click="btnclick(index)"
					:class="{active:index==cindex}">
					<text>{{item}}</text>
				</view>
			</scroll-view>
			<!-- 右滚动区域 -->
			<scroll-view scroll-y="true" class="rg" :style="{height: wh + 'px'}" :scroll-top="scrollTop">
				<view class="rgg">
					<view v-for="(item,index) in goodsList" :key="index" @click="gotoDetail(item)" style="width: 48%;">
						<image :src="item.goods_small_logo" mode="widthFix" style="width: 250rpx;"></image>
						<view class="f">
							{{item.goods_name}}
						</view>
						<view class="price">
							￥{{item.goods_price}}
						</view>
					</view>
				</view>
			</scroll-view>

		</view>

	</view>
</template>

<script>
	// 导入自己封装的 mixin 模块
	import badgeMix from '@/mixins/tabbar-badge.js'

	export default {
		// 将 badgeMix 混入到当前的页面中进行使用
		mixins: [badgeMix],
		data() {
			return {
				// 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度 
				wh: 0,
				// 分类数据列表
				cateList: ['时尚女装', '户外运动', '箱包配饰'],
				cindex: 0,
				goodsList: [],
				scrollTop: 0
			}
		},
		onLoad(o) {
			const sysInfo = uni.getSystemInfoSync() //获得设备信息同步接口
			this.wh = sysInfo.windowHeight - 50 //拿到当前的可用高度
			if (o.zindex) {
				this.cindex = o.zindex
				this.getCateList(this.cindex)
			} else {
				// 默认加载第一行
				this.cindex = 0
				this.getCateList(0)
			}
		},
		methods: {
			btnclick(index) {
				this.cindex = index
				// 让 scrollTop 的值在 0 与 1 之间切换 
				this.scrollTop = this.scrollTop === 0 ? 1 : 0
				this.getCateList(index)
			},
			// 根据类型进行过滤商品
			async getCateList(index) { // 发起请求
				const res = await uni.$http.post('/filtergoodsdetail', {
					goods_type: parseInt(index) + 1
				})
				this.goodsList = res.data

			},
			gotoDetail(item) {
				uni.navigateTo({
					url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
				})
			},
			// 跳转搜索框
			gotoSearch() {
				uni.navigateTo({
					url: '/subpkg/search/search',
				})
			}
		}
	}
</script>

<style lang="scss">
	.zg {
		display: flex;

		.lg {
			width: 120px;

			.lw {
				text-align: center;
				line-height: 60px;
				font-size: 15px;
				height: 60px;
				background-color: #f7f7f7;

			}

			.active {
				color: red;
				background-color: #ffffff;
				position: relative;

				&::before {
					content: '';
					display: block;
					position: absolute;
					width: 3px;
					height: 30px;
					background-color: #c00000;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.rg {
			.rgg {
				margin: 10rpx 20rpx 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.f {
					font-size: 26rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					word-break: break-all;
				}

				.price {
					color: #c00000;
					font-size: 36rpx;
				}
			}
		}


	}
</style>